<template>
  <div class="services">

    <!-- 页面标题 -->
    <section class="page-header">
      <div class="container">
        <h2>我们的服务</h2>
        <p>专业的IT服务解决方案，满足您的各种需求</p>
      </div>
    </section>

    <!-- 服务列表 -->
    <section class="services-list">
      <div class="container">
        <div class="service-item">
          <div class="service-icon">
            <i class="fas fa-laptop"></i>
          </div>
          <div class="service-content">
            <h3>设备维护</h3>
            <p>我们提供专业的IT设备维护服务，包括计算机、服务器、网络设备等的维护和故障排除。我们的技术团队拥有丰富的经验，能够快速解决各种设备问题，确保您的IT系统稳定运行。</p>
            <router-link to="/services/device-maintenance" class="learn-more">了解更多</router-link>
          </div>
        </div>
        <div class="service-item">
          <div class="service-icon">
            <i class="fas fa-globe"></i>
          </div>
          <div class="service-content">
            <h3>网站运营</h3>
            <p>我们提供全方位的网站运营支持，包括内容更新、SEO优化、网站推广、数据分析等服务。我们的专业团队将帮助您提升网站流量，增加用户转化率，提高网站影响力。</p>
            <router-link to="/services/website-operation" class="learn-more">了解更多</router-link>
          </div>
        </div>
        <div class="service-item">
          <div class="service-icon">
            <i class="fas fa-code"></i>
          </div>
          <div class="service-content">
            <h3>网站搭建</h3>
            <p>我们提供定制化的网站建设服务，根据您的需求和预算，为您打造专业、美观、功能完善的网站。我们的团队拥有丰富的网站开发经验，能够满足您的各种个性化需求。</p>
            <router-link to="/services/website-building" class="learn-more">了解更多</router-link>
          </div>
        </div>
        <div class="service-item">
          <div class="service-icon">
            <i class="fas fa-download"></i>
          </div>
          <div class="service-content">
            <h3>软件下载</h3>
            <p>我们提供安全、可靠的软件下载服务，为您提供各种常用软件的最新版本。所有软件均经过严格检测，确保无病毒、无恶意插件，让您下载更放心。</p>
            <router-link to="/software" class="learn-more">了解更多</router-link>
          </div>
        </div>
      </div>
    </section>

    <!-- 服务流程 -->
    <section class="service-process">
      <div class="container">
        <h3>服务流程</h3>
        <div class="process-steps">
          <div class="process-step">
            <div class="step-number">1</div>
            <h4>需求沟通</h4>
            <p>了解客户需求，提供专业建议</p>
          </div>
          <div class="process-step">
            <div class="step-number">2</div>
            <h4>方案制定</h4>
            <p>根据需求制定详细的服务方案</p>
          </div>
          <div class="process-step">
            <div class="step-number">3</div>
            <h4>服务实施</h4>
            <p>专业团队按照方案实施服务</p>
          </div>
          <div class="process-step">
            <div class="step-number">4</div>
            <h4>效果评估</h4>
            <p>对服务效果进行评估和优化</p>
          </div>
          <div class="process-step">
            <div class="step-number">5</div>
            <h4>售后服务</h4>
            <p>提供持续的售后服务和支持</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 客户评价 -->
    <section class="client-testimonials">
      <div class="container">
        <h3>客户评价</h3>
        <div class="testimonials">
          <div class="testimonial">
            <div class="testimonial-content">
              <p>"团星网的设备维护服务非常专业，技术人员响应迅速，解决问题高效，让我们的IT系统运行更加稳定。"</p>
            </div>
            <div class="testimonial-author">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="客户头像" />
              <div class="author-info">
                <h4>张先生</h4>
                <p>某科技公司IT经理</p>
              </div>
            </div>
          </div>
          <div class="testimonial">
            <div class="testimonial-content">
              <p>"我们的网站由团星网搭建，设计精美，功能完善，上线后获得了很好的用户反馈。他们的服务态度也非常好。"</p>
            </div>
            <div class="testimonial-author">
              <img src="https://randomuser.me/api/portraits/men/30.jpg" alt="客户头像" />
              <div class="author-info">
                <h4>李先生</h4>
                <p>某电商公司运营总监</p>
              </div>
            </div>
          </div>
          <div class="testimonial">
            <div class="testimonial-content">
              <p>"团星网的网站运营服务帮助我们提升了网站流量和转化率，效果显著。他们的专业团队为我们提供了很多有价值的建议。"</p>
            </div>
            <div class="testimonial-author">
              <img src="https://randomuser.me/api/portraits/men/24.jpg" alt="客户头像" />
              <div class="author-info">
                <h4>王先生</h4>
                <p>某教育机构市场总监</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

  </div>
</template>

<script>
export default {
  name: 'ServicesView'
};
</script>

<style scoped>
/* 导航栏样式（与Home.vue相同） */
.navbar {
  background-color: #333;
  color: white;
  padding: 1rem 0;
}

.container {
  width: 80%;
  margin: 0 auto;
  max-width: 1200px;
}

.logo h1 {
  margin: 0;
  font-size: 1.8rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

/* 页面标题样式 */
.page-header {
  background-color: #f5f5f5;
  padding: 3rem 0;
  text-align: center;
}

.page-header h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.page-header p {
  font-size: 1.2rem;
  color: #666;
  margin: 0;
}

/* 服务列表样式 */
.services-list {
  padding: 4rem 0;
}

.service-item {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 3rem;
  align-items: center;
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.service-icon {
  width: 80px;
  height: 80px;
  background-color: #4285f4;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.service-content {
  flex: 1;
  min-width: 300px;
}

.service-content h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #333;
}

.service-content p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
  color: #666;
}

.learn-more {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: #4285f4;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

/* 服务流程样式 */
.service-process {
  background-color: #f5f5f5;
  padding: 4rem 0;
}

.service-process h3 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 3rem;
  color: #333;
}

.process-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.process-step {
  width: 200px;
  text-align: center;
  padding: 1.5rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.step-number {
  width: 40px;
  height: 40px;
  background-color: #4285f4;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-weight: bold;
}

.process-step h4 {
  margin-bottom: 1rem;
  color: #333;
}

.process-step p {
  color: #666;
  font-size: 0.9rem;
}

/* 客户评价样式 */
.client-testimonials {
  padding: 4rem 0;
}

.client-testimonials h3 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 3rem;
  color: #333;
}

.testimonials {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.testimonial {
  width: 350px;
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.testimonial-content {
  margin-bottom: 1.5rem;
}

.testimonial-content p {
  font-style: italic;
  line-height: 1.6;
  color: #666;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-author img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info h4 {
  margin: 0 0 0.2rem 0;
  color: #333;
}

.author-info p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

/* 页脚样式（与Home.vue相同） */
footer {
  background-color: #333;
  color: white;
  padding: 3rem 0 1rem;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section {
  flex: 1;
  min-width: 200px;
}

.footer-section h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.footer-section p {
  margin: 0 0 0.5rem 0;
  color: #ddd;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-section ul li a {
  color: #ddd;
  text-decoration: none;
}

.copyright {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid #555;
  color: #aaa;
}
</style>